<template>
  <div class="w-100% h-100% flex flex-col items-center justify-center">
    <div>
      <span class="text-30px" dark="text-light-50">Flex 骰子</span>
    </div>
    <div class="flex items-center justify-center" dark="text-light-50">
      <span>切换主题 ： </span>
      <i @click="toggleDark()" icon-btn  i-carbon-sun dark="i-carbon-moon bg-white"/>
    </div>
    <div
      class="w-500px h-200px mt-30px shadow-md flex flex-col flex-wrap justify-around" dark="shadow-cool-gray-50"
    >
      <div class="flex flex-row justify-around">
        <div
          class="w-50px h-50px b-1px rounded-5 flex justify-center items-center" dark="border-light-50"
        >
          <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white" ></div>
        </div>
        <div
          class="w-50px h-50px b-1px rounded-5 flex justify-around items-center" dark="border-light-50"
        >
          <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
        </div>
        <div
          class="w-50px h-50px b-1px rounded-5 flex flex-col justify-around items-center" dark="border-light-50"
        >
          <div class="w-100% flex justify-center items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
        </div>
      </div>
      <div class="w-100% flex flex-row justify-around">
        <div
          class="w-50px h-50px b-1px rounded-5 flex flex-col justify-around items-center" dark="border-light-50"
        >
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
        </div>
        <div
          class="w-50px h-50px b-1px rounded-5 flex flex-col justify-around items-center" dark="border-light-50"
        >
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
        </div>
        <div
          class="w-50px h-50px b-1px rounded-5 flex flex-col justify-around items-center" dark="border-light-50"
        >
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
          <div class="w-100% flex justify-around items-center">
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
            <div class="w-6 h-6 rounded-3 bg-black" dark="bg-white"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core";
import { onMounted } from "vue";

const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>

<style scoped>
.test {
  border-radius: 10px;
}
</style>
